<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="岗位名称" prop="postName">
        <el-input
          v-model="queryParams.postName"
          placeholder="请输入岗位名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="组织机构" prop="organizationSysCode">
        <el-select v-model="queryParams.organizationSysCode" placeholder="选择组织机构" clearable size="small">
          <el-option
            v-for="item in organizationDatas"
            :key="item.organizationSysCode"
            :label="item.organizationName"
            :value="item.organizationSysCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
        <el-button size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="mytable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="radio" type="index" width="50"></el-table-column>
      <el-table-column v-if="selection" type="selection" width="55"></el-table-column>
      <el-table-column
        align="center"
        v-for="(item,index,key) in tableColumns"
        :item="item"
        :key="key"
        :index="index"
        :label="item.label"
      >
        <template slot-scope="scope">
          <div v-if="item.colIsEdit">
            <el-input-number
              v-if="scope.row.edit"
              size="small"
              v-model="scope.row[item.prop]"
              :placeholder="'请输入'+item.label"
              :controls="false"
              :min="0"
              :max="9999"
            >
            </el-input-number>
            <span v-if="!scope.row.edit">{{scope.row[item.prop]}}</span>
          </div>
          <div v-else>
            <span>{{scope.row[item.prop]}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- 全局控制的编辑 -->
          <div  style="display: inline-block;"><!-- v-if="is_edit&&scope.row.add==undefined" -->
            <!-- 编辑 -->
            <el-button
              size="mini"
              v-if="!scope.row.edit"
              @click="handleEdit(scope.$index, scope.row)"
              type="primary"
              v-hasPermi="['organization:headship:edit']"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="success"
              :plain="true"
              v-if="scope.row.edit"
              @click="handleSave(scope.$index, scope.row)"
              :loading="saveLoading"
            >
              保存
            </el-button>
            <el-button
              size="mini"
              v-if="scope.row.edit"
              :plain="true"
              type="infor"
              @click="handleCancel(scope.$index, scope.row)"
            >
              取消
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="queryParams.current"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  import {getPageList,edit} from '@/api/organization/postHeadship/postHeadship.js'
  import {getOrganizationsSelectItems} from '@/api/organization/organization/organization.js'
  export default {
    name: "PostHeadshipIndex",
    dicts: [],
    components: {  },
    data() {
      return {
        saveLoading:false,
        loading: false,
        multipleSelection: [], //复选框，数据
        // space_color: true, //隔行变色
        current:1,
        size:10,
        total:0,
        is_edit: true, //是否可编辑
        is_delete: false, //是否可删除
        selection: false, //是否需要复选框
        radio: false, //单选变色
        organizationDatas:[],
        tableData:[],
        tableColumns:[
          {
            colIsEdit:false,
            prop: "organizationSysPath",
            label: "组织机构",
            width: "150"
          },
          {
            colIsEdit:false,
            prop: "postName",
            label: "岗位名称",
            width: "200"
          },
          {
            colIsEdit:false,
            prop: "postCode",
            label: "岗位编码",
            width: "100"
          },
          {
            colIsEdit:true,
            prop: "postHeadshipCapacity",
            label: "预设编制人数",
            width: "100"
          },
          {
            colIsEdit:false,
            prop: "postHeadshipReal",
            label: "实际人数",
            width: "100"
          },
          {
            colIsEdit:false,
            prop: "postHeadshipLack",
            label: "空缺人数",
            width: "100"
          },
          {
            colIsEdit:false,
            prop: "postHeadshipOver",
            label: "超编人数",
            width: "100"
          }
        ],
        tableData:[],
        // 查询参数
        queryParams: {
          postSysCode: null,
          organizationSysCode: null,
          current:1,
          size:10
        },
      };
    },
    mounted() {
      this.getOrganizationDatas()
      this.getPageList()
    },
    methods: {
      getOrganizationDatas(){
        getOrganizationsSelectItems().then(res =>{
          this.organizationDatas = res.data
        }).catch(err =>{
          console.log('错误原因：',err)
        })
      },
      getPageList(){
        this.loading = true
        getPageList(this.queryParams).then(res =>{
          this.loading = false
          this.tableData = res.data.records;
          this.total = res.data.total
          //向表格数据添加edit属性值，默认为false
          this.tableData = this.tableData.map(item =>{
            return {...item,edit:false}
          })
          this.loading = false
        }).catch(err =>{
          this.loading = false
          console.log('错误原因：',err)
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getPageList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 切换页码
      handleSizeChange(val) {
        this.queryParams.size = val;
        this.getPageList();
      },
      // 翻页
      handleCurrentChange(val) {
        this.queryParams.current = val;
        this.getPageList();
      },
      //多选框
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //编辑
      handleEdit(index, row) {
        this.tableData[index].edit = true
      },
      //取消编辑
      handleCancel(index, row) {
        this.tableData[index].edit = false
      },
      //删除
      handleDelete(index, row) {
        thistableDatasplice(index, 1);
        this.$message({
          message: "删除成功！",
          type: "success"
        });
      },
      //保存
      handleSave(index, row) {
        this.saveLoading = true
        row.edit = false;
        delete this.tableData[index].add;
        if(row.postHeadshipCapacity > 500){
          let msg = row.organizationSysPath+'—'+row.postName+'岗位编制超过500，否确认保存?'
          this.$confirm(msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            edit(row).then(res =>{
              this.saveLoading = false
              this.$message({
                message: "保存成功！",
                type: "success"
              });
            }).catch(err =>{
              this.saveLoading = false
              console.log('修改编制数据失败，原因：',err)
            })
          }).catch((err) => {
            console.log('删除失败原因：',err)
          });
        }else{
          edit(row).then(res =>{
            this.saveLoading = false
            this.$message({
              message: "保存成功！",
              type: "success"
            });
          }).catch(err =>{
            this.saveLoading = false
            console.log('修改编制数据失败，原因：',err)
          })
        }
      },
    },
  };
</script>
<style scoped>

</style>
